<template>
  <div>
    <sticky>
      <search
        v-model="keywords"
        @on-submit="search"
        @on-cancel="cancel"
        :auto-fixed="false"
        placeholder="请输入关键词"
        ref="search">
        <img @click="$router.push('/')" slot="left" class="search-logo" src="./images/logo.png" alt="">
        <img slot="right" class="search-phone" src="./images/phone.png" @click="show = true" alt="">
      </search>
    </sticky>
    <div v-transfer-dom>
      <x-dialog v-model="show" class="dialog" hide-on-blur
      :dialog-style="{}">
        <p style="color:#fff;text-align:center;" >
        <div>
          <p>关注微信公众号：“天南山文化”</p>
          <p>QQ邮箱：1258908899@qq.com</p>
          <p>联系电话：<span @click="jump()">18908519886</span></p>
           <div @click="show = false">
          <span class="vux-close"></span>
        </div>
        </div>
      </x-dialog>
    </div>
  </div>
</template>
<script>
  import { Search, Sticky, XDialog, TransferDomDirective as TransferDom } from 'vux'
  export default {
    directives: {
      TransferDom
    },
    data () {
      return {
        show: false,
        keywords: ''
      }
    },
    components: {
      Search,
      Sticky,
      XDialog
    },
    methods: {
      search () {
        this.keywords = this.keywords
        this.$router.replace('/courses/list?type=all&name=' + this.keywords)
      },
      cancel () {
        this.keywords = null
      },
      jump () {
        location.href = 'tel:18908519886'
      }
    },
    mounted () {
      if (this.$route.query.name) {
        this.keywords = this.$route.query.name
      }
    }
  }
</script>
<style scoped lang="less">
  .search-logo {
    width: 28px;
    height: 28px;
    padding-right: 10px;
  }
  .search-phone {
    width: 25px;
    height: 25px;
    padding-left: 10px;
  }
  .dialog {
    color: rgb(64, 158, 255);
    div {
      padding: 20px 10px;
    }
    p {
      text-align:left;
      padding: 5px;
      padding-left: 30px;
    }
  }
</style>